import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import DrillScope from './DrillScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
var traceCols = [{
  title:'名称',
  key:'url',
  render:function(fmtVal,rowData){
    return (
      <a href={'#/traces/'+rowData.id}>{fmtVal}</a>
    )
  }
},{
  title:'白屏时间(ms)',
  key:'breakDown',
  formatter:format.integer
},{
  title:'耗时(ms)',
  key:'executeTime',
  sortable:true,
  formatter:format.integer
},{
  title:'发生时间',
  key:'timestamp',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'操作系统及版本',
  key:'osName',
  render:function(fmtVal,rowData){
    return (
      <span>{fmtVal+' '+rowData.osVersionName}</span>
    )
  }
}]

export default class DrillView extends View {
  constructor(props){
    super(props);
    this.showInteractionSetting = this.showInteractionSetting.bind(this)
  }
  showInteractionSetting(){
    InteractionSetting.mount({
      alias:this.state.title,
      id:this.scope.nameId
    })
  }
  render(){
    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            <h4>{this.scope.hostname?this.scope.hostname:this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title={this.state.viewTitle} extra={
                      addWidgetMixin(this.scope.chart0Api,this.state.viewTitle)
                    }>
                    <ChartWidget store={this.state.chart0}/>
                  </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                <Card title={this.scope.hostname?'白屏时间':'WebView Breakdown'} extra={
                    addWidgetMixin(this.scope.chart1Api,this.scope.hostname?'白屏时间':'WebView Breakdown')
                  }>
                  <ChartWidget store={this.state.chart1}/>
                </Card>
                </div>
              </div>
            </div>
            <div className="pure-g">
              <div className="pure-u-1">
                <div className="box">
                  <Card title="慢加载追踪列表">
                    <GridWidget cols={traceCols} store={this.state.grid} />
                  </Card>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

DrillView.defaultProps = {
  Scope:DrillScope
}
